/*
 * @Author: xiehangyun 
 * @Date: 2025-02-27 13:29:25 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-27 13:44:35
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./colorFill.module.less";
import { Tooltip } from "antd";
import { SketchPicker } from "react-color";
import ColorPick from "@/editorComponent/RightMenu/ColorPick/ColorPick";
import fillcolorPNG from "./fillcolor.png";

interface Iprops {
  children?: ReactNode,
  colorChange: (color: string) => void
  onOpenChange?: (visible: boolean) => void;
}

// 颜色填充组件
export default function ColorFill(props: Iprops) {

  const dom = useRef<HTMLDivElement | null>(null);
  const [fillColor, setFillColor] = useState("#ffffff");

  useEffect(() => {
  }, []);

  useEffect(() => autorun(() => {
  }, { delay: 30 }), []);

  return (
    <Tooltip
      title={
        <div className={styles.color_picker} >
          <SketchPicker
            className={styles.SketchPicker}
            color={fillColor}
            onChange={(color: any) => {
              const colorStr = color.hex as `#${string}`;
              setFillColor(colorStr);
              props.colorChange(colorStr);
            }}
          />
          <ColorPick />
        </div>
      }
      trigger={['click']}
      color={"#00000000"}
      placement="bottom"
      onOpenChange={props.onOpenChange}
    >
      <span className={styles.btn} >
        <img className={styles.icon} src={fillcolorPNG} alt="" />
      </span>
    </Tooltip>
  );
}